import { Flex, Typography } from "antd";
import {
  LikeOutlined,
  MessageOutlined,
  ExportOutlined,
  StarOutlined,
} from "@ant-design/icons";
const { Text, Title } = Typography;
import { useState, useEffect } from "react";
import styles from "./TxNewsCard.module.css";
import { formatNumberToWan } from "../Common/commonData";
import { useUser } from "@/hook/useUser/useUser";
import ProxyImage from "../Common/ProxyImage/ProxyImage";

export function TxNewsCard({ tab = "hotSpot", item = {}, style = {} }) {
  const { openInNewWindow, listDisplay } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";
  const isImageEnabled = listDisplay === 0 ? true : false;

  return (
    <Flex
      vertical={false}
      style={{
        backgroundColor: "white",
        height: "8.5rem",
        padding: 16,
        boxShadow:
          "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
        ...style,
      }}>
      {/* 内容区域 */}
      <Flex gap={12} flex={1} vertical={false}>
        {/* 图片 (响应式显示) */}
        {isImageEnabled && (
          <a href={item.url} target={target} rel="noopener noreferrer">
            <ProxyImage
              originalUrl={item.extra_content?.photo_url}
              style={{
                height: "108.9px",
                width: "185.9px",
                borderRadius: "4px",
                maxHeight: "160px",
                objectFit: "cover",
              }}
            />
          </a>
        )}

        {/* 文字内容 */}
        <Flex
          vertical
          flex={1}
          style={{
            overflow: "hidden",
            minHeight: 120,
            width: "100%",
            "@media (minWidth: 768px)": { minHeight: 100 },
          }}>
          <Flex vertical style={{ maxHeight: "5rem" }}>
            {/* 标题 (响应式大小) */}
            <a
              className={styles["content-link"]}
              href={item.url}
              target={target}
              rel="noopener noreferrer">
              <Title
                key={item.url}
                className={styles.title}
                level={5}
                ellipsis={{ rows: 2, expandable: true }}
                style={{
                  maxWidth: item.extra_content?.photo_url ? "36rem" : "48rem",
                  margin: 0,
                  fontSize: "1rem",
                  "@media (minWidth: 768px)": {
                    fontSize: "1.1rem",
                  },
                }}>
                {item.title}
              </Title>

              {/* 简介 (仅移动端显示) */}
              <Typography.Paragraph
                type="secondary"
                ellipsis={{
                  rows: item.title?.length ? 1 : 2,
                }}
                style={{
                  maxWidth: item.extra_content?.photo_url ? "36rem" : "48rem",
                  marginTop: ".5rem",
                  minHeight: "2rem",
                  marginBottom: 0,
                }}>
                {tab === "hotQuestion" && item.extra_content?.answerer && (
                  <Text>{item.extra_content?.answerer + ": "}</Text>
                )}

                {item.extra_content?.intro || item.extra_content?.answer}
              </Typography.Paragraph>
            </a>
          </Flex>

          {/* 互动数据 */}
          <Flex
            justify="space-between"
            align="flex-end"
            style={{ marginTop: ".5rem" }}>
            <Flex gap={16}>
              {tab === "hotSpot" && (
                <MetaItem
                  icon={<LikeOutlined />}
                  value={item.extra_content?.hot}
                />
              )}
              <MetaItem
                icon={<StarOutlined />}
                value={item.extra_content?.likes}
              />
              <MetaItem
                icon={<MessageOutlined />}
                value={item.extra_content?.comment_count}
              />
              {tab === "hotSpot" && (
                <MetaItem
                  icon={<ExportOutlined />}
                  value={item.extra_content?.share_count}
                />
              )}
            </Flex>

            {/* 作者/回答者 */}
            {tab === "hotSpot" && (
              <a target={target} href={item.extra_content?.authors?.[0]?.url}>
                <Text type="secondary" style={{ fontSize: 12 }}>
                  {item.extra_content?.authors?.[0]?.name}
                </Text>
              </a>
            )}
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
}

// 辅助组件 - 元信息项
const MetaItem = ({ icon, value }) => (
  <Flex gap={4} align="center">
    {icon}
    <Text type="secondary" style={{ fontSize: 12 }}>
      {formatNumberToWan(value) || 0}
    </Text>
  </Flex>
);
